<template>
  <el-row>
    <el-col>
      <el-checkbox-group v-model="selIcons" @change="changeIcon">
        <el-checkbox
            v-for="item of iconList"
            class="my-svg-icon"
            :label="'#icon-'+ item.font_class"
            >
          <svg class="icon svg-icon" aria-hidden="true">
            <use :href="'#icon-'+ item.font_class"></use>
          </svg>
        </el-checkbox>
      </el-checkbox-group>
    </el-col>
  </el-row>
</template>

<script>

import iconJson from '@/assets/iconfont/iconfont.json'

export default {
  name: "SelIcon",
  model: {
    prop: 'value',
    event: 'updateValue'
  },
  props: ["value"],
  data() {
    return {
      selIcons: [],
      iconList: []
    }
  },
  methods: {
    /**
     * {图标checkbox 改变触发}
     *
     * @author: 宋康
     * @date: 2022/10/10 16:47
     */
    changeIcon(val) {
      let selIcon = ''
      if (val.length > 1) {
        selIcon = val[1];
      } else if (val.length === 1) {
        selIcon = val[0];
      }
      //
      if ('' !== selIcon) {
        this.selIcons = [];
      }
      //
      this.selIcons.push(selIcon);
      this.$emit('updateValue', selIcon);
    }
  },
  mounted() {
    this.selIcons = [];
    this.selIcons.push(this.value);
    this.iconList = iconJson.glyphs;
  }
}
</script>

<style lang="scss" scoped>
.my-svg-icon {
  height: auto;
  padding: 0 10px;
  margin: 3px 8px;

  & + & {
    margin: 0 8px !important;
  }

  :deep(.el-checkbox__label) {
    padding: 0;
  }

  :deep(.el-checkbox__input) {
    position: absolute;
    left: 44px;
    bottom: 0;
    padding-bottom: 4px;
  }

  .icon {
    display: block;
    height: 80px;
    color: #333;

    padding-bottom: 25px;
  }

  .svg-icon {
    width: 80px;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>